<template>
  <div class="page-content">
    <div class="title">
      病历记录
    </div>
    <div class="table-box">
      <my-table
        :table-data="tableData"
        :column-data="columnData"
        :show-operate="true"
        :operate-btn="operateBtn"
        @handleClick="handleClick"
      />
    </div>
    <my-dialog
      :dialog-title="'制定策略'"
      :dialog-visible="openDialog"
      dialog-width="1000px"
      @closeDialog="visibleChange"
    >
      <template slot="content">
        <div class="dialog-content">
          <div class="item">
            <div class="label">
              病例编号：
            </div>
            <div class="value">
              {{ selectRow.id }}
            </div>
          </div>
          <div class="item">
            <div class="label">
              病例名称：
            </div>
            <div class="value">
              {{ selectRow.blname }}
            </div>
          </div>
          <div class="item">
            <div class="label">
              访问控制属性：
            </div>
            <div class="value">
              <el-select v-model="value" placeholder="医疗机构" class="min-select">
                <el-option
                  v-for="item in [{
                    label: '北京协和医院',
                    value: '0'
                  }]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="value" placeholder="科室" class="min-select">
                <el-option
                  v-for="item in [
                    {
                      label: '心血管内科',
                      value: '0'
                    },
                    {
                      label: '呼吸科',
                      value: '1'
                    }
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="value" placeholder="职称" class="min-select">
                <el-option
                  v-for="item in [
                    {
                      label: '主任医师',
                      value: '0'
                    },
                    {
                      label: '副主任医师',
                      value: '1'
                    }
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="value" placeholder="学位" class="min-select">
                <el-option
                  v-for="item in [
                    {
                      label: '硕士',
                      value: '0'
                    },
                    {
                      label: '教授',
                      value: '1'
                    }
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="item">
            <div class="label">
              允许访问时间：
            </div>
            <div class="valuel">
              <el-select v-model="value" placeholder="选择时间" class="min-select">
                <el-option
                  v-for="item in [{
                    label: '白天',
                    value: '0'
                  }]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="bottom-button">
            <el-button>取消</el-button>
            <el-button type="primary">确认</el-button>
          </div>
        </div>
      </template>
    </my-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectRow: {},
      openDialog: false,
      columnData: [
        { prop: 'id', label: '病例编号', align: 'center', minWidth: '190' },
        { prop: 'blname', label: '病例名称', align: 'center' },
        { prop: 'shuxing', label: '策略属性', align: 'center', minWidth: '250' },
        { prop: 'sj', label: '病例创建时间', align: 'center' },
        { prop: 'state', label: '状态', align: 'center', minWidth: '80px' }
      ],
      tableData: [
        {
          id: 'EHR10001200112024542',
          blname: '门诊诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '待审核',
          stateCode: 1
        },
        {
          id: 'EHR10001200112024565',
          blname: '呼吸科诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '已审批',
          stateCode: 2
        },
        {
          id: 'EHR10001200112024566',
          blname: '肾脏科诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '未提交',
          stateCode: 0
        },
        {
          id: 'EHR10001200112024567',
          blname: '急诊诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '未提交',
          stateCode: 0
        },
        {
          id: 'EHR10001200112024568',
          blname: '呼吸科诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '未提交',
          stateCode: 0
        },
        {
          id: 'EHR10001200112024560',
          blname: '心血管科诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '已启用',
          stateCode: 3
        },
        {
          id: 'EHR10001200112024569',
          blname: '骨科诊断记录',
          shuxing: '协和医院、心内科、主任、硕士',
          sj: '2022-04-11',
          state: '已启用',
          stateCode: 3
        }
      ]
    }
  },
  computed: {
    operateBtn() {
      return [
        {
          label: '查看详情',
          type: 'text',
          size: 'mini',
          event: 'edit'
        },
        {
          label: '制定策略',
          type: 'text',
          size: 'mini',
          event: 'delete'
        }
      ]
    }
  },
  methods: {
    handleClick(row, event) {
      if (event === 'edit') {
        this.selectRow = row
        this.openDialog = true
      }
    },
    // 自定义显示与隐藏
    visibleChange(data) {
      console.log('子组件调用父组件的方法', data)
      this.openDialog = data
    }
  }
}
</script>

<style lang="scss" scoped>
    .page-content {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 20px;
        height: calc(100vh - 50px) !important;
        .title{
            color: #666666;
            font-size: 18px;
        }
        .table-box{
            margin-top: 20px;
            flex: 1;
            display: flex;

        }
    }
    .dialog-content{
        position: relative;
        .item{
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            height: 40px;
            .label{
                width: 160px;
                font-size: 13px;
                color: #333333;
            }
            .value{
                font-size: 12px;
                color: #999999;
            }
        }
        .bottom-button{
            // position: absolute;
            display: flex;
            justify-content: end;
            right: 10px;
            bottom: 10px;
        }
    }
    .min-select{
        width: 160px;
        height: 30px !important;
        line-height: 30px !important;
        margin-right: 10px;
    }
    ::v-deep .el-input__inner {
        height: 30px !important;
        line-height: 30px !important;
    }
</style>
